---
# title: "Ring Offset Color"
title: "轮廓环偏移颜色"
# description: "Utilities for setting the color of outline ring offsets."
description: "用于设置轮廓环偏移颜色的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/ringOffsetColor'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = {
  plugin,
  transformProperties: ({ selector, properties }) => {
    properties['box-shadow'] = `0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)`
    return properties
  }
}


<!-- ## Usage -->
## 使用

<!-- Use the `ring-offset-{color}` utilities to change the color of a ring offset. Usually this is done to try and match the offset to the parent background color, since true box-shadow offsets aren't actually possible in CSS. -->
使用 `ring-offset-{color}` 功能来改变环形偏移的颜色。通常这样做是为了使偏移量与父背景色相匹配，因为在 CSS 中真正的盒状阴影偏移是不存在的。

```html violet
<template preview class="p-0">
  <div class="bg-violet-100 grid grid-cols-1 gap-6 justify-items-center p-8 ">
    <p class="font-semibold text-violet-600">bg-purple-100</p>
    <button tabindex="-1" class="focus:outline-none text-sm px-5 py-3 rounded-md font-semibold text-white bg-violet-500 ring ring-violet-600 ring-offset-4 ring-offset-violet-100">
      ring-offset-purple-100
    </button>
  </div>
</template>

<div class="... **bg-purple-100**">
  <button class="... ring ring-purple-600 **ring-offset-4** **ring-offset-purple-100**">
    ring-offset-purple-100
  </button>
</div>
```

---


<!-- ## Responsive -->
## 响应式

<!-- To control the ring offset color at a specific breakpoint, add a `{screen}:` prefix to any existing ring offset color utility. For example, use `md:ring-offset-blue-500` to apply the `ring-offset-blue-500` utility at only medium screen sizes and above. -->
要控制特定断点处的环形偏移颜色，请在任何现有的环形偏移颜色的功能类中添加 `{screen}:` 前缀。例如，使用 `md:ring-offset-blue-500` 来应用 `ring-offset-blue-500` 功能，只适用于中等尺寸以上的屏幕。

```html
<button class="ring-2 ring-offset-2 ring-offset-blue-300 **md:ring-offset-blue-500**">
  <!-- ... -->
</button>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
更多有关 Tailwind 响应式设计的功能，请参看[响应式设计](/docs/responsive-design)文档。

---

<!-- ## Customizing -->
## 自定义

<!-- You can customize which ring offset color utilities are generated by customizing your color palette under the `colors` key in the `theme` section of your `tailwind.config.js` file: -->
您可以通过在您的 `tailwind.config.js` 文件的 `theme` 部分的 `colors` 键下自定义您的调色板来生成环形偏移颜色功能。

```js
// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.blueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.yellow,
    }
  }
}
```

<!-- If you'd like to customize only the ring offset color utilities without affecting your global color palette, use the `ringOffsetColor` key instead: -->
如果您只是想自定义环形偏移颜色而不影响全局的调色板配置，请使用 `ringOffsetColor`。

```js
// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    ringOffsetColor: {
      white: colors.white,
      pink: colors.fuchsia,
    }
  }
}
```

<!-- Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme). -->
在[主题定制文档](/docs/theme#-5)中了解更多关于自定义主题的内容。

<!-- ### Variants -->
### 变体

<Variants plugin="ringOffsetColor" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="ringOffsetColor" />
